<template>
	<div class="home-container layout-pd">
		<div class="header">
			<h2 class="title">热门面试题库</h2>
		</div>

		<el-tabs v-model="activeCategory" @tab-click="filterQuestions" class="tabs">
			<el-tab-pane label="全部" name="all" />
			<el-tab-pane label="25春招热题" name="spring2025" />
			<el-tab-pane label="资格考试" name="certification" />
			<el-tab-pane label="招聘考试" name="recruitment" />
			<el-tab-pane label="面试真题" name="interview" />
			<el-tab-pane label="我的收藏" name="favorites" />
		</el-tabs>

		<el-row :gutter="20" class="question-grid">
			<el-col v-for="(question, index) in filteredQuestions" :key="index" :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
				<div class="question-card" @click="goToContent(question)">
					<div class="icon-container" :style="{ background: question.bgColor }">
						<i :class="question.icon" class="question-icon"></i>
					</div>
					<div class="question-info">
						<h3 class="question-title">{{ question.title }}</h3>
						<p class="question-meta">题目数量: {{ question.count }}</p>
						<p class="question-difficulty" :style="{ color: question.difficultyColor }">
							{{ question.difficulty }}
						</p>
					</div>
				</div>
			</el-col>
		</el-row>
	</div>
</template>

<script setup lang="ts">
import { ref, reactive, computed } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();
const activeCategory = ref('all');

const questionBank = reactive([
	{ title: 'Java 基础', category: 'spring2025', count: 50, difficulty: '中等', difficultyColor: '#FFA500', icon: 'fa fa-java', bgColor: '#FFE4B5' },
	{
		title: '数据结构与算法',
		category: 'spring2025',
		count: 80,
		difficulty: '困难',
		difficultyColor: '#FF4500',
		icon: 'fa fa-code',
		bgColor: '#F0E68C',
	},
	{
		title: '计算机网络',
		category: 'certification',
		count: 60,
		difficulty: '中等',
		difficultyColor: '#FFA500',
		icon: 'fa fa-network-wired',
		bgColor: '#B0E0E6',
	},
	{
		title: '数据库系统',
		category: 'certification',
		count: 40,
		difficulty: '容易',
		difficultyColor: '#32CD32',
		icon: 'fa fa-database',
		bgColor: '#98FB98',
	},
	{ title: '前端面试题', category: 'interview', count: 70, difficulty: '中等', difficultyColor: '#FFA500', icon: 'fa fa-html5', bgColor: '#FFD700' },
	{ title: '操作系统', category: 'recruitment', count: 55, difficulty: '困难', difficultyColor: '#FF4500', icon: 'fa fa-server', bgColor: '#DDA0DD' },
	{ title: '系统设计', category: 'recruitment', count: 35, difficulty: '容易', difficultyColor: '#32CD32', icon: 'fa fa-cogs', bgColor: '#87CEFA' },
]);

const filteredQuestions = computed(() => {
	return activeCategory.value === 'all' ? questionBank : questionBank.filter((q) => q.category === activeCategory.value);
});

const filterQuestions = (tab) => {
	activeCategory.value = tab.props.name;
};

const goToContent = (question) => {
	router.push(`/bank_content?title=${question.title}`);
};
</script>

<style scoped>
.home-container {
	padding: 20px;
}
.header {
	text-align: left;
	margin-bottom: 20px;
}
.title {
	font-size: 24px;
	font-weight: bold;
}
.tabs {
	margin-bottom: 20px;
}
.question-grid {
	display: flex;
	flex-wrap: wrap;
}
.question-card {
	background: white;
	border-radius: 10px;
	padding: 15px;
	text-align: center;
	transition: 0.3s;
	cursor: pointer;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	margin-bottom: 15px;
}
.question-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
}
.icon-container {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: auto;
}
.question-icon {
	font-size: 24px;
	color: white;
}
.question-info {
	margin-top: 10px;
}
.question-title {
	font-size: 16px;
	font-weight: bold;
}
.question-meta {
	font-size: 14px;
	color: gray;
}
.question-difficulty {
	font-size: 14px;
	font-weight: bold;
}
</style>
